import EchartsComponent, { MyChartOption } from '@/components/EchartsComponent';
import { Link } from '@@/exports';
import { useIntl, useModel } from '@umijs/max';
import { DatePicker, Radio, Space } from 'antd';
import dayjs, { Dayjs } from 'dayjs';
import React, { useState } from 'react';

type IProps = {
  chargeInfoOptions?: MyChartOption;
  sendChargeInfo: (data: any) => void;
  isOldStation?: boolean;
};

const PowerStatistics: React.FC<IProps> = (props) => {
  const { initialState } = useModel('@@initialState');
  const { chargeInfoOptions, sendChargeInfo, isOldStation = false } = props;
  const [chargeRange, setChargeRange] = useState('day');
  const [selectRange, setSelectRange] = useState<Dayjs>(dayjs());
  const intl = useIntl();
  const isPhotovoltaic = initialState?.isPhotovoltaic;
  const RadioButtons = [
    {
      label: intl.formatMessage({ id: 'global.hour' }),
      value: 'day',
    },
    {
      label: intl.formatMessage({ id: 'global.day' }),
      value: 'month',
    },
    {
      label: intl.formatMessage({ id: 'global.month' }),
      value: 'year',
    },
  ];
  return (
    <div>
      <div style={{ marginTop: '-2.5rem' }}>
        <Space style={{ display: 'flex', justifyContent: 'right' }}>
          <Radio.Group
            value={chargeRange}
            buttonStyle={'solid'}
            size={'small'}
            onChange={(e) => {
              setChargeRange(e.target.value);
              setSelectRange(dayjs());
              sendChargeInfo({
                chargeStartTime:
                  e.target.value === 'day'
                    ? dayjs().format('YYYY-MM-DD')
                    : e.target.value === 'month'
                    ? dayjs().format('YYYY-MM')
                    : dayjs().format('YYYY'),
                chargeUnit: e.target.value,
              });
            }}
          >
            {RadioButtons.map((item) => {
              return (
                <Radio.Button key={item.value} value={item.value}>
                  {item.label}
                </Radio.Button>
              );
            })}
          </Radio.Group>
          {/*@ts-ignore*/}
          <DatePicker
            allowClear={false}
            picker={chargeRange}
            value={selectRange}
            size={'small'}
            style={{ width: 100 }}
            onChange={(e) => {
              setSelectRange(e);
              sendChargeInfo({
                chargeStartTime:
                  chargeRange === 'day'
                    ? dayjs(e).format('YYYY-MM-DD')
                    : chargeRange === 'month'
                    ? dayjs(e).format('YYYY-MM')
                    : dayjs(e).format('YYYY'),
                chargeUnit: chargeRange,
              });
            }}
          />
          <Link to={'/statistics/electric'}>
            <div style={{ cursor: 'pointer', marginRight: '-15px' }}>
              <span style={{ color: '#000022', fontSize: '12px' }}>
                {intl.formatMessage({ id: 'global.detail' })}
              </span>
              <span style={{ color: ' #999999', marginLeft: '1px' }}> {'>'}</span>
            </div>
          </Link>
        </Space>
        <EchartsComponent
          option={chargeInfoOptions}
          height={isOldStation ? '248px' : isPhotovoltaic ? '16rem' : '20rem'}
        />
      </div>
    </div>
  );
};

export default PowerStatistics;
